import React, { Component } from 'react'
import { StatusBar, BackHandler, WebView, View } from 'react-native'
import { connect } from 'react-redux'

// Styles
import styles from './Styles/WebScreenStyle'

class WebScreen extends Component {
  static navigationOptions = ({navigation}) => ({
    title: navigation.state.params.title,
  })
  constructor(props) {
    super(props)
    const { state } = this.props.navigation
    this.state = {
      link: state.params.link
    }
  }
  componentDidMount() {
    BackHandler.addEventListener("hardwareBackPress", this.onBackPress);
  }
  componentWillUnmount() {
    BackHandler.removeEventListener("hardwareBackPress", this.onBackPress);
  }
  onBackPress = () => {
    this.props.navigation.goBack()
    return true
  }
  render () {
    const { goBack } = this.props.navigation
    return (
      <View style={{flex:1}}>
        <StatusBar translucent={false} barStyle='dark-content' backgroundColor='white' />
        <WebView
          style={{flex:1}}
          startInLoadingState={true}
          source={{uri:this.state.link}} />
      </View>
    )
  }
}

const mapStateToProps = (state) => {
  return {
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(WebScreen)
